.pure-nav-bar {
    background: var(--pure-nav-bar-background, var(--pure-background-element));
    line-height: var(--pure-nav-bar-line-height, 1);
    position: var(--pure-nav-bar-position, sticky);
    top: var(--pure-nav-bar-top, 0);
    z-index: var(--pure-nav-bar-z-index, 996);
}

.pure-status-bar {
    height: var(--pure-status-bar-height, var(--status-bar-height));
    background: var(--pure-status-bar-background);
}

.pure-navigation-bar {
    height: var(--pure-navigation-bar-height, var(--navigation-bar-height, 44px));
    background: var(--pure-navigation-bar-background);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: var(--pure-navigation-bar-margin);
    padding: var(--pure-navigation-bar-padding, 0 10px);
    box-sizing: border-box;
    gap: var(--pure-navigation-bar-gap);
}

.pure-navigation-bar-left {
    flex-shrink: 0;
    width: var(--pure-navigation-bar-left-width, 30%);
}

.pure-navigation-bar-left-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--pure-navigation-bar-left-gap, 10px);
}

.pure-navigation-bar-back {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--pure-navigation-bar-back-font-size);
    color: var(--pure-navigation-bar-back-color);
    padding: 0 var(--pure-navigation-bar-back-padding);
    margin: var(--pure-navigation-bar-back-margin);
    box-sizing: border-box;
    gap: var(--pure-navigation-bar-back-gap);
    flex-shrink: 0;
}

.pure-navigation-bar-back-icon {
    font-size: var(--pure-navigation-bar-back-icon-font-size, var(--pure-navigation-bar-back-font-size, 24px));
    color: var(--pure-navigation-bar-back-icon-color);
}

.pure-navigation-bar-back-text {
    font-size: var(--pure-navigation-bar-back-text-font-size, 16px);
    color: var(--pure-navigation-bar-back-text-color);
    margin: var(--pure-navigation-bar-bacl-text-margin);
}

.pure-navigation-bar-title {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--pure-navigation-bar-title-font-size, 17px);
    color: var(--pure-navigation-bar-title-color);
    text-align: var(--pure-navigation-bar-title-text-align, center);
    margin: var(--pure-navigation-bar-title-margin);
    padding: var(--pure-navigation-bar-title-padding, 0 5px);
    box-sizing: border-box;
    font-weight: var(--pure-navigation-bar-title-font-weight, 700);
}

.pure-navigation-bar-right {
    flex-shrink: 0;
    width: var(--pure-navigation-bar-right-width, 30%);
}

.pure-navigation-bar-right-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pure-navigation-bar-right-gap, 5px);
}

.pure-navigation-bar-btns {
    display: inline-flex;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    font-size: var(--pure-navigation-bar-btns-font-size);
    gap: var(--pure-navigation-bar-btns-gap, 10px);
}

.pure-navigation-bar-btn {
    display: inline-flex;
    flex-direction: var(--pure-navigation-bar-btn-flex-direction, column);
    align-items: var(--pure-navigation-bar-btn-align-items, center);
    justify-content: var(--pure-navigation-bar-btn-justify-content, center);
    font-size: var(--pure-navigation-bar-btn-font-size);
    color: var(--pure-navigation-bar-btn-color);
    padding: var(--pure-navigation-bar-btn-padding);
    margin: var(--pure-navigation-bar-btn-margin);
    box-sizing: border-box;
    gap: var(--pure-navigation-bar-btn-gap, 3px);
    flex-shrink: 0;
    position: relative;
}

.pure-navigation-bar-btn-icon {
    font-size: var(--pure-navigation-bar-btn-icon-font-size, var(--pure-navigation-bar-btn-font-size, 20px));
    color: var(--pure-navigation-bar-btn-icon-color);
}

.pure-navigation-bar-btn-text {
    font-size: var(--pure-navigation-bar-btn-text-font-size, 10px);
    color: var(--pure-navigation-bar-btn-text-color);
}

.pure-navigation-bar-btn-functionality {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    overflow: hidden;
    --pure-button-display: flex;
    --pure-button-height: 100%;
}

/* 标题居左 */
.pure-navigation-bar-left-title {
    --pure-navigation-bar-left-width: auto;
    --pure-navigation-bar-title-text-align: left;
    --pure-navigation-bar-right-width: auto;
}

/* 胶囊按钮 */
.pure-navigation-bar-saft-menu-button {
    width: var(--pure-navigation-bar-saft-menu-button-width);
    flex-shrink: 0;
}